<template>
    <div class="redeem page">
        <formHeader :title="'奖项兑换'"></formHeader>
        <div class="con">
            <div class="address">
                <img src="./image/address.png" alt="">
                <div class="desc" v-if="!showAddress" @click="turn('/address')">请填写收货地址</div>
                <div class="desc" v-if="showAddress&&address" @click="turn('/address')">
                    <div class="name">{{address.userName}} <span>{{address.mobile}}</span></div>
                    <div class="area">{{address.province+address.city+address.county+address.detail}}</div>
                </div>
                <i class="cubeic-arrow"></i>
            </div>
            <div class="present" v-if="data">
                <div class="title">
                    <img src="./image/home.png" alt="">
                    <div class="name">{{data.shopName||'社集优选旗舰店'}}</div>
                </div>
                <div class="content">
                    <img :src="imgH+data.img" alt="">
                    <div class="detail">
                        <div class="goodsName">{{present.name}}</div>
                        <div class="noms">
                            <div>默认</div>
                            <div>x1</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="info">“点击提交领奖就可以坐等收货辣~”</div>
            <div class="getChance" :class="{gray:!showAddress&&address}" @click="commit">提交领奖</div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getPresentList} from '@/api/lottery'
    import {listAddress,getAddress,commitOrder} from "@/api/order";
    import {showError} from "../../toast";
    import {showAlert} from "../../dialog";

    export default {
        name: "redeem",
        components:{formHeader},
        data(){
            return{
                imgH:process.env.VUE_APP_IMG_DOMAIN,
                data:null,
                present:null,
                address:null,
                showAddress:false
            }
        },
        activated() {
            getPresentList(this.$route.query.recordId).then(res=>{
                console.log(res);
                this.data = res.data[0]
                this.present = res.extra.lotteryGoods
            })
            if (this.$route.query.addressId) {
                this.showAddress = true
                getAddress(this.$route.query.addressId).then(res => {
                    console.log(res.data);
                    this.address = res.data
                })
            }else {
                listAddress().then(res => {
                    if (res.data.length == 0) {//地址不存在
                        this.showAlert()
                    }
                    for (let i = 0; i < res.data.length; i++) {
                        let ad = res.data[i]
                        this.address = ad
                        if (ad.def) {
                            break
                        }
                    }
                    console.log(res.data);
                })
            }
        },
        methods:{
            showAlert() {
                this.alert = this.$createDialog({
                    type: 'alert',
                    title: '',
                    content: '请先添加地址!',
                    icon: 'cubeic-alert',
                    onConfirm: () => {
                        this.$router.push('/address')
                    }
                }).show()
            },
            turn(path){
                this.$router.push({path})
            },
            commit(){
                if (!this.showAddress){
                    return
                }
                let data = {
                    orderType: 0,
                    ...this.address,
                    remark: null,
                    payWay: 0,
                    temp:0,
                    recordId:this.$route.query.recordId
                }
                commitOrder(data).then(res=>{
                    console.log(res);
                    if (res.code == 10000){
                        showAlert('兑奖成功')
                        this.$router.push({path:'/lottery/detail'})
                    }
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.redeem
    background-color: #f4f3f3
    /deep/.header
        background-color: #00d6c0
    .con
        padding 10px 12px
        margin-top 47px
        .address
            height 80px
            padding  0 10px
            display flex
            justify-content space-between
            align-items center
            background-color: #fff
            border-radius 5px
            img
                width: 25px
                height: 25px
            .desc
                color #333
                font-size 16px
                flex 1
                margin 0 15px
                .name
                    font-weight bold
                    margin-bottom 10px
                /*.area*/
                    /*white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;*/
            i
                color #999
        .present
            background-color: #fff
            padding 10px 14px
            border-radius 5px
            margin-top 10px
            .title
                display flex
                color #333
                font-size 16px
                align-items center
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                img
                    width: 22px
                    height: 22px
                    margin-right 4px
            .content
                display flex
                padding 0 4px
                margin-top 13px
                img
                    width: 93px
                    height: 93px
                    border-radius 5px
                    margin-right 8px
                .detail
                    flex 1
                    .goodsName
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                        color #333
                        font-size 13px
                    .noms
                        display flex
                        justify-content space-between
                        font-size 9px
                        color #999
                        margin-top 10px
        .info
            font-size 12px
            color #c8c8c8
            text-align center
            margin 0 auto
            margin-top 43px
        .getChance
            width 100px
            height 30px
            margin 0 auto
            color #fff
            background-color: #00d6c0
            line-height 30px
            text-align center
            font-size 15px
            border-radius 2.5px
            margin-top 30px
        .gray
            background-color: #999

</style>